<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>乐扣游戏商城</title>
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/community.css">
</head>

<body>
  <!-- header模块-->
  <header>
    <div class="header-l">
      <a href="index.html">
        <img src="images/logo.png" alt="">
      </a>
    </div>
    <div class="header-r">
      <ul>
        <li class="first">
          <a href="shopcar.html">购物车</a>
        </li>
        <li>
          <a href="index.html">商店</a>
        </li>

        <li>
          <a href="ranking.html">排行榜</a>
        </li>
        <li>
          <a href="javascript:;">客服</a>
        </li>
      </ul>
    </div>
    <div class="header-m">
      <a href="register.html"><button>注 册</button></a>

      <a href="login.html"><button>登 录</button></a>
    </div>
  </header>

  <div class="empty">
  </div>

  <!-- 导航栏模块 -->
  <div class="title w">
    <ul>
      <li style="padding-left: 240px;">
        <a href="javascript:;" style="color:red">热门动态</a>
      </li>
      <li>
        <a href="javascript:;">游戏资讯</a>
      </li>
      <li>
        <a href="javascript:;">特别关注</a>
      </li>
      <li>
        <a href="javascript:;">只看话题</a>
      </li>
    </ul>
  </div>

  <!-- main模块 -->
  <div class="main w">
    <div class="main-l">
      <div class="ico">
        <img src="update/kunkun.jpg" alt="">
        <h2>方方土</h2>
        <p>ip:广东</p>
      </div>
      <div class="new">
        <p>2022-11-11</p>
        <h2>Epic商城本周免费领取《鬼玩人》
          下周领取《星球大战:战机中队》</h2>
        <p>在这款以三代《Evil Dead》电影以及 STARZ 原创《Ash vs Evil Dead》电视剧集为舞台的游戏中，
          你将扮演由四位生存者组成的团队，必须通过探索，劫掠，管理你的恐惧，并找到重要物品，来封印各个世界之间的缝隙。</p>
        <img src="update/new-1.jpg" alt="">
      </div>
      <div class="pinlun">
        <a href="#">
          <img src="update/pinlun.png" alt="">
        </a>
      </div>

      <div class="ico">
        <img src="update/zkj.jpg" alt="">
        <h2>zkj</h2>
        <p>ip:广东</p>
      </div>
      <div class="new">
        <p>2022-11-11</p>
        <h2>Epic商城本周免费领取《鬼玩人》
          下周领取《星球大战:战机中队》</h2>
        <p>在这款以三代《Evil Dead》电影以及 STARZ 原创《Ash vs Evil Dead》电视剧集为舞台的游戏中，
          你将扮演由四位生存者组成的团队，必须通过探索，劫掠，管理你的恐惧，并找到重要物品，来封印各个世界之间的缝隙。</p>
        <img src="update/new-1.jpg" alt="">
      </div>
      <div class="pinlun">
        <a href="#">
          <img src="update/pinlun.png" alt="">
        </a>
      </div>

      <div class="ico">
        <img src="update/yu.jpg" alt="">
        <h2>裕哥</h2>
        <p>ip:广东</p>
      </div>
      <div class="new">
        <p>2022-11-11</p>
        <h2>Epic商城本周免费领取《鬼玩人》
          下周领取《星球大战:战机中队》</h2>
        <p>在这款以三代《Evil Dead》电影以及 STARZ 原创《Ash vs Evil Dead》电视剧集为舞台的游戏中，
          你将扮演由四位生存者组成的团队，必须通过探索，劫掠，管理你的恐惧，并找到重要物品，来封印各个世界之间的缝隙。</p>
        <img src="update/new-1.jpg" alt="">
      </div>
      <div class="pinlun">
        <a href="#">
          <img src="update/pinlun.png" alt="">
        </a>
      </div>

    </div>
    <div class="main-r">
      <div class="hot">
        <div class="title">
          <a href="#">热门 </a>
          <span>|</span>
          <a href="#" style="color: #e8e7e7;"> 最新</a>
        </div>
        <div class="content1">
          <div class="wenzi">
            网易暴雪分手真相
          </div>
        </div>

        <div class="content2">
          <div class="img">
            <a href="#">
              <img src="update/new-3.jpg" alt="">
            </a>
          </div>
          <div class="imgMsg">
            2022TGA最佳游戏
          </div>
        </div>

        <div class="content2" style="top:370px ;">
          <div class="img">
            <a href="#">
              <img src="update/new-3.jpg" alt="">
            </a>
          </div>
          <div class="imgMsg">
            2022TGA最佳游戏
          </div>
        </div>

        <div class="content2" style="top:500px ;">
          <div class="img">
            <a href="#">
              <img src="update/new-3.jpg" alt="">
            </a>
          </div>
          <div class="imgMsg">
            2022TGA最佳游戏
          </div>
        </div>

        <div class="content2" style="top:630px ;">
          <div class="img">
            <a href="#">
              <img src="update/new-3.jpg" alt="">
            </a>
          </div>
          <div class="imgMsg">
            2022TGA最佳游戏
          </div>
        </div>

        <div class="content2" style="top:760px ;">
          <div class="img">
            <a href="#">
              <img src="update/new-3.jpg" alt="">
            </a>
          </div>
          <div class="imgMsg">
            2022TGA最佳游戏
          </div>
        </div>
      </div>
      <!-- 评论区主体区域 -->
      <div class="say">
        <section id="todoapp">
          <!-- 输入框 -->
          <div class="say_header">
            <h1>讨论区</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="说说您对这款游戏的看法？"
              class="new-todo" />
          </div>
          <!-- 列表区域 -->
          <section class="say_main">
            <ul class="todo-list">
              <li class="todo" v-for="(item,index) in list">
                <div class="view">
                  <span class="index">{{ index+1 }}.</span>
                  <label>{{ item }}</label>
                  <button class="destroy" @click="remove(index)"></button>
                </div>
              </li>
            </ul>
          </section>
          <!-- 统计和清空 -->
          <div class="say_footer" v-show="list.length!=0">
            <span class="todo-count" v-if="list.length!=0">
              <strong>{{ list.length }}</strong> items left
            </span>
            <button v-show="list.length!=0" class="clear-completed" @click="clear">
              Clear
            </button>
          </div>
        </section>
      </div>
    </div>
  </div>


  <!-- 底部模块 -->
  <footer>
    <div class="mod_copyright">
      <div class="links">
        <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a>
        |
        <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">游戏社区</a> |<a href="#">爱心公益</a>|
        <a href="#">English Site</a> | <a href="#">Contact U</a>
      </div>
      <div class="copyright">
        地址：嘉应学院江北校区东区学生宿舍 | 电话：13434940752 | 邮箱: 1960144768@qq.com <br>
      </div>
    </div>
  </footer>
  <script src="js/vue.js"></script>
  <script src="js/community.js"></script>
  <script>
    var app = new Vue({
      el: "#todoapp",
      data: {
        list: ["666", "你干嘛", "小黑子"],
        inputValue: ""
      },
      methods: {
        add: function () {
          this.list.push(this.inputValue);
        },
        remove: function (index) {
          // console.log("删除");
          // console.log(index);
          this.list.splice(index, 1);
        },
        clear: function () {
          this.list = []
        }
      }

    })
  </script>
</body>

</html>